<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="get">get</button>
    <button class="post">post</button>
</body>
<script>
    var getBtn = document.getElementsByClassName("get")[0];
    var postBtn = document.getElementsByClassName("post")[0];

    // ajax的请求流程
    // 1. 创建请求
    // 2. 配置请求相关的信息 type url async
    // 3. 发送请求  
    // 4. 绑定事件 -> 监听xhr.readyState改变 
    // 5. 接收服务器响应数据 => 后续处理


    getBtn.onclick = function () {
        var wd = "";  // 默认查询所有数据
        var col = "id"; //默认id排序
        var type = "asc"; //默认升序
        var page = 1; // 默认显示第一页
        var size = 10;  // 默认显示10条

        // http://43.138.81.225/demo/php/searchGoodsOrderLimit.php
        // `wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}`


        get({
            url: "http://43.138.81.225/demo/php/searchGoodsOrderLimit.php",
            data: `wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}`,
            // async: true,
            dataType: "json",
            success: function (res) {
                console.log("请求成功", res);
            }
        })

        get({
            url: "http://43.138.81.225/demo/php/searchGoodsOrderLimit.php",
            data: {
                wd: wd,
                col,
                type,
                size,
                page
            },
            // async: true,
            dataType: "json",
            success: function (res) {
                console.log("请求成功", res);
            }
        })

    }


    postBtn.onclick = function () {
        var user = "a123123";
        var pwd = "123123";
        var phone = 17386141517;
        var email = "a123123@163.com";

        var xhr = new XMLHttpRequest();

        // 以post方式传递数据时,将数据存在请求主体(body)中,随着http header传递给后端 

        // post传参 
        // 1. 数据存放在请求主体中  -> 作为参数放到xhr.send()中
        // 2. 发送请求之前需要先设置请求头(设置传输数据类型)
        // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

        xhr.open("post", `http://43.138.81.225/demo/php/register.php`, true)

        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(`user=${user}&pwd=${pwd}&email=${email}&phone=${phone}`);

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var result = xhr.responseText;
                // console.log(result);
                result = JSON.parse(result);
                console.log(result);
                // var { status, message } = result;
                // if (status) {
                //     // location.href="./login.html";
                // } else {
                //     alert(message);
                // }
            }
        }

    }



    // 封装一个方法 -> 快速发送ajax请求 -> 处理响应的结果
    // options下的参数
    //      url 请求地址
    //      data 携带数据 (string|object)
    //      async 是否异步
    //      dataType 服务端返回数据类型('text' "css" "javascript","xml","json" 默认'text')
    //      success  请求成功时执行的回调函数, 回调函数有一个形参->用于接口->接口返回数据

    // get(`http://43.138.81.225/demo/php/searchGoodsOrderLimit.php`, `wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}`, true, "json", function (res) {
    //     console.log("请求成功:", res);
    // })

    // 缺点1:
    //  函数多参数传参 -> 讲究一一对应 ->万一参数顺序错误 -> 有问题

    // 解决方法: 
    // 传入一个对象作为参数, 键值对形式存在,排名不分先后

    // 缺点2:
    // 数据传递还需要自己手动拼接 -> 麻烦
    // 1. 参数数据队列 也是以键值对形式存在
    // 2. 排名不分先后 
    // 是否可以 是否可以传入一个对象 -> 将其解析为参数数据队列
    // {wd,col,type,page,size }  ->  `wd=xxx&col=xxx&type=xxx&page=xxxx&size=xxx`



    function get(options) { // 对象  {url,data,async,dataType,success}

        var { url, data = "", async = true, dataType = "text", success } = options;

        var xhr = new XMLHttpRequest();

        if (Object.prototype.toString.call(data) == "[object Object]") {
            var list = [];
            for (var key in data) {
                var val = data[key];
                list.push(`${key}=${val}`);
            }
            data = list.join("&");
        }
        // console.log(data);

        xhr.open("get", data ? (url + "?" + data) : url, async);

        xhr.send();

        xhr.onreadystatechange = function () {

            if (xhr.readyState == 4 && xhr.status == 200) {
                var result = xhr.responseText; //获取响应的文本
                if (dataType == "json") {
                    result = JSON.parse(result);
                }
                // console.log(result);

                if (success && typeof success == "function") {
                    success.call(xhr, result); //请求成功时执行 传入响应数据
                }
            }
        }
    }


</script>

</html>